<template>
	<div class="wrapper">
        <!-- Breadcrumb Area Start Here -->
        <div class="breadcrumb-area">
            <div class="container">
                <ol class="breadcrumb breadcrumb-list">
                    <li class="breadcrumb-item">
                        <NuxtLink to="/">Home</NuxtLink>
                    </li>
                    <li class="breadcrumb-item active">{{ contentDetail.title }}</li>
                </ol>
            </div>
        </div>
        <!-- Breadcrumb Area End Here -->
        <!-- Product Thumbnail Start -->
        <div class="main-product-thumbnail ptb-80">
            <div class="container">
                <div class="row">
                    <!-- Main Thumbnail Image Start -->
                    <div class="col-lg-5 col-md-6 mb-all-40">
                        <swiper
                            :modules="[Navigation, Thumbs]"
                            :spaceBetween="10"
                            :navigation="true"
                            :thumbs="{ swiper: thumbsSwiperValue }"
                        >
                            <swiper-slide v-for="(item, index) in thumbsSwiper" :key="index">
                                <div class="productImg"><img :src="item" alt=""></div>
                            </swiper-slide>
                        </swiper>
                        <swiper
                            :modules="[Navigation, Thumbs]"
                            watch-slides-progress
                            :spaceBetween="10"
                            :slidesPerView="5"
                            :watchSlidesProgress="true"
                            class="thumbsSwiper"
                            @swiper="setThumbsSwiper"
                        >
                            <swiper-slide v-for="(item, index) in thumbsSwiper" :key="index">
                                <div class="thumbsImg"><img :src="item" alt=""></div>
                            </swiper-slide>
                        </swiper>
                    </div>
                    <!-- Main Thumbnail Image End -->
                    <!-- Thumbnail Description Start -->
                    <div class="col-lg-7 col-md-6">
                        <div class="thubnail-desc ">
                            <h3 class="product-header">{{ contentDetail.title }}</h3>
                            <div class="pro-thumb-price mt-20">
                                <p>
                                    <span class="special-price">${{ contentDetail.price }}</span>
                                    <del class="old-price">${{ contentDetail.originalPrice }}</del>
                                </p>
                            </div>
                            <p class="pro-desc-details">{{ contentDetail.intro }}</p>
                            <ul class="pro-list-features">
                                <li>Ex Tax:
                                    <span class="ex-text">${{ contentDetail.price }}</span>
                                </li>
                            </ul>
                            <span :class="{ 'zmdi': true, 'zmdi-favorite-outline': !isCollect, 'zmdi-favorite': isCollect }" @click="updateCollect"></span>
                        </div>
                    </div>
                    <!-- Thumbnail Description End -->
                </div>
                <!-- Row End -->
            </div>
        </div>
        <!-- Product Thumbnail End -->
        <!-- Product Thumbnail Description Start -->
        <div class="thumnail-desc  pb-80">
            <div class="container">
                <div class="thumb-desc-inner">
                    <div class="row">
                        <div class="col-sm-12">
                            <ul class="main-thumb-desc nav tabs-area" role="tablist">
                                <li>
                                    <a class="active" data-toggle="tab" href="#dtail">Description</a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#review">Reviews ({{ contentDetail.commonTotal }})</a>
                                </li>
                            </ul>
                            <!-- Product Thumbnail Tab Content Start -->
                            <div class="tab-content thumb-content">
                                <div id="dtail" class="tab-pane fade show active">
                                    <div v-html="contentDetail.content"></div>
                                </div>
                                <div id="review" class="tab-pane fade">
                                    <!-- Reviews Start -->
                                    <div class="review">
                                        <div class="group-title">
                                            <h2>customer review</h2>
                                        </div>
                                        <ul class="review-list">
                                            <!-- Single Review List Start -->
                                            <li v-for="item in contentDetail.commonList" :key="item.id">
                                                <div class="commList name">
                                                    <div class="label">Reviewer's name:</div>
                                                    <div class="value">{{ item.name }}</div>
                                                </div>
                                                <div class="commList content">
                                                    <div class="label">Review: </div>
                                                    <div class="value">{{ item.content }}</div>
                                                </div>
                                                <div class="commList date">
                                                    <div class="label">Review time:</div>
                                                    <div class="value">{{ dateFormat(item.createDate) }}</div>
                                                </div>
                                            </li>
                                            <!-- Single Review List End -->
                                        </ul>
                                    </div>
                                    <!-- Reviews End -->
                                    <!-- Reviews Start -->
                                    <div class="review mt-10">
                                        <!-- Reviews Field Start -->
                                        <div class="riview-field mt-40">
                                            <client-only>
                                                <n-form ref="formRef" :model="formValue" class="form-group" :rules="rules">
                                                    <n-form-item-row label="You Name" path="name" class="col-form-label">
                                                        <n-input v-model:value="formValue.name" class="col-sm-7" placeholder="Please enter your name" clearable/>
                                                    </n-form-item-row>
                                                    <n-form-item-row label="You Email" path="email" class="col-form-label">
                                                        <n-input v-model:value="formValue.email" class="col-sm-7" placeholder="Please enter your email" clearable/>
                                                    </n-form-item-row>
                                                    <n-form-item-row label="You Review" path="content" class="col-form-label">
                                                        <n-input type="textarea" v-model:value="formValue.content" class="col-sm-7" placeholder="Please enter your review" clearable/>
                                                    </n-form-item-row>
                                                </n-form>
                                                <n-button type="primary" class="login-btn" :disabled="isLoading" :loading="isLoading" block secondary strong @click="handleValidateClick">
                                                    Submit
                                                </n-button>
                                            </client-only>
                                        </div>
                                        <!-- Reviews Field Start -->
                                    </div>
                                    <!-- Reviews End -->
                                </div>
                            </div>
                            <!-- Product Thumbnail Tab Content End -->
                        </div>
                    </div>
                    <!-- Row End -->
                </div>
            </div>
            <!-- Container End -->
        </div>
        <!-- Product Thumbnail Description End -->
        <!-- More Product Start Here -->
        <div class="more-product pb-80">
            <div class="container">
                <div class="section-title text-center mb-50">
                    <h2>Related Products</h2>
                </div>
                <!-- Featured Product Activation Start Here -->
                <div>
                    <!-- Single Product Start -->
                    <swiper
                        :slides-per-view="slidePerView"
                        :space-between="20"
                        :modules="[Navigation]"
                        navigation
                    >
                        <swiper-slide v-for="item in recomProduct" :key="item.id">
                            <div class="single-ponno-product">
                                <!-- Product Image Start -->
                                <div class="pro-img">
                                    <NuxtLink :to="`/product/${item.id}`" target="_blank">
                                        <img class="primary-img" :src="item.img" :alt="item.title">
                                    </NuxtLink>
                                </div>
                                <!-- Product Image End -->
                                <!-- Product Content Start -->
                                <div class="pro-content">
                                    <div class="pro-info">
                                        <h4><NuxtLink :to="`/product/${item.id}`" target="_blank">{{ item.title }}</NuxtLink></h4>
                                        <p><span class="special-price">${{ item.price }}</span></p>
                                    </div>
                                </div>
                                <!-- Product Content End -->
                            </div>
                        </swiper-slide>
                    </swiper>
                    <!-- Single Product End -->
                </div>
                <!-- Featured Product Activation Start Here -->
            </div>
        </div>
        <!-- More Product End Here -->
    </div>
</template>

<script lang="ts" setup>
import { IArticleDetail } from 'models/IArticle'
import IComment from 'models/IComment';
import { Navigation, Pagination, Autoplay, Thumbs } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/thumbs';
import 'swiper/css';
import Prism from 'prismjs'

import {
  NConfigProvider,
  NTabs,
  NTabPane,
  NForm,
  NFormItemRow,
  NInput,
  NButton,
  useMessage
} from 'naive-ui'

const route = useRoute()
const id = route.params.id

const contentDetail = ref(null)
contentDetail.value = await useServerRequest(`/clientWeb/content/${id}`)
const thumbsSwiperValue = ref(null)
const thumbsSwiper = contentDetail.value.img.split(',');
const recomProduct = ref(null)
recomProduct.value = await useServerRequest(`/clientWeb/recomProduct`)
console.log(thumbsSwiper, contentDetail.value.commonList);
useHead({
    title: contentDetail.value.title,
    meta: [
        { name: 'keywords', content: contentDetail.value.keyword },
        { name: 'description', content: contentDetail.value.description },
    ]
})

const setThumbsSwiper = (swiper) => {
    thumbsSwiperValue.value = swiper
}

const isCollect = ref(false)
const userData = ref(null)
const slidePerView = ref(5);
onMounted(() => { 
    nextTick(() => {
        userData.value = getStorage('userInfo');
        getCollect(userData.value.id)
        formValue.value.messageUrl = window.location.href
        formValue.value.name = userData.value.name
        formValue.value.email = userData.value.email
        formValue.value.phone = userData.value.phoneNum
        const platform = getPlatform()
        if (platform === 'PC') {
            slidePerView.value = 5
        } else {
            slidePerView.value = 2
        }
    })
})

const getCollect = async (userId) => {
    const collectStatus = await useServerRequest(`/clientWeb/contentIsCollect/${id}/${userId}`);
    isCollect.value = collectStatus.isCollect
}

const message = useMessage();
const updateCollect = async () => {
    const { code, data, error, msg } = await $https({
        method: "PUT",
        url: 'clientWeb/content/collect',
        body: {
            contentId: id,
            userId: userData.value.id,
            userName: userData.value.name,
            collect: isCollect.value ? 0 : 1
        }
    })
    if (code === 200) {
        let msg = isCollect.value ? 'Uncollect Success!' : 'Collect Success!'
        isCollect.value = isCollect.value ? false : true;
        message.success(msg); 
    } else {
        let text = error ? error[0] : msg
        message.error(text); 
    }
}

    const formValue = ref({
        id: id,
        name: '',
        email: '',
        phone: '',
        messageUrl: '',
        contentName: contentDetail.value.title,
        contentId: id,
        content: ''
    })
    
    const submitRules = {
        name: {
            required: true,
            message: 'Please enter your name',
            trigger: ['input', 'blur']
        },
        email: {
          required: true,
          message: 'Please enter your phone',
          trigger: ['input', 'blur']
        }
      }

    const formRef = ref();
    const isLoading = ref(false)
    console.log(route, formValue)
    const handleValidateClick = (e: MouseEvent) => {
        e.preventDefault()
        
        formRef.value?.validate(async (errors) => {
          if (!errors) {
            isLoading.value = true;
            const { code, data, error, msg } = await $https({
                method: "POST",
                url: 'clientWeb/content/common',
                body: formValue.value
            })
            console.log(code, error, data, message)
            if (code === 200) {
                isLoading.value = false;
                message.success("Send Successfully !");
                contentDetail.value = await useServerRequest(`/clientWeb/content/${id}`);
                location.reload();
            } else {
                isLoading.value = false;
                let text = error ? error[0] : msg
                message.error(`${text}`);
            }

          } else {
            console.log(errors)
          }
        })
    }

</script>

<style scoped>
    .productImg {
        text-align: center;
        width: 100%;
    }

    .thumbsSwiper {
        margin-top: 20px;
    }

    .thumbsImg {
        border: 1px solid #ddd
    }

    .thumbsSwiper .swiper-slide-thumb-active .thumbsImg {
        border-color: #0438a1
    }

    .zmdi-favorite {
        color: red;
        margin-top: 20px;
        display: block;
        font-size: 28px;
        cursor: pointer
    }

    .zmdi-favorite-outline {
        margin-top: 20px;
        display: block;
        font-size: 28px;
        cursor: pointer
    }

    .review-list li {
        padding-bottom: 16px;
        border-bottom: 1px dashed #ddd;
        margin-bottom: 16px
    }

    .review-list .commList {
        display: flex;
    }

    .review-list .commList .label {
        width: 130px;
        font-size: 16px;
        color: #333;
    }

    .review-list .commList .value {
        width: calc(100% - 130px);
        font-size: 16px;
        color: #333;
    }

    .review-list .commList.content .value {
        font-weight: bold;
    }

    .review-list li p {
        display: inline-block;
        margin-left: 10px
    }

    .review-list li .content {
        font-size: 16px;
        color: #666;
        margin: 14px 0
    }

    .review-list .commList.date .value {
        font-size: 14px;
        color: #999;
    }

    .review-list li .date p {
        font-size: 14px
    }
</style>